<template>
	<a-skeleton :loading="loading" active :paragraph="{rows: 20}">
		<!-- 整租信息 -->
		<template v-if="detail.isMainRoom === 1 && detail.houseType !== 3">
			<a-typography-text strong>
				<blockquote>房源信息</blockquote>
			</a-typography-text>
			<a-descriptions :column="{xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}">
				<a-descriptions-item label="经营模式">
					{{ findLabel(houseBizModeList, detail.houseBase.houseBizMode) }}
				</a-descriptions-item>
				<a-descriptions-item label="房源编号">
					{{ detail.houseBase.houseNo || '无' }}
				</a-descriptions-item>
				<a-descriptions-item label="城市">
					{{ detail.houseBase.cityName || '无' }}
				</a-descriptions-item>
				<a-descriptions-item label="小区地址" :span="3">
					{{ detail.community.address || '无' }}
				</a-descriptions-item>
				<a-descriptions-item label="门牌号">
					{{ detail.houseBase.doorplate || '无' }}
				</a-descriptions-item>
				<a-descriptions-item label="户型">{{ detail.houseBase.room }}室{{ detail.houseBase.livingRoom }}厅</a-descriptions-item>
				<a-descriptions-item label="朝向">
					{{ findLabel(orientationList, detail.orientation) }}
				</a-descriptions-item>
				<a-descriptions-item label="面积">{{ detail.houseArea }} ㎡</a-descriptions-item>
				<a-descriptions-item label="楼层信息">第{{ detail.houseBase.currentFloor }}层，共{{ detail.houseBase.totalFloor }}层</a-descriptions-item>
				<a-descriptions-item label="装修类型">
					{{ detail.houseBase.fitmentTypeName || '无' }}
				</a-descriptions-item>
				<a-descriptions-item label="用水">
					{{ findLabel(waterTypeList, detail.houseBaseExtend.waterType) }}
				</a-descriptions-item>
				<a-descriptions-item label="用电">
					{{ findLabel(elecTypeList, detail.houseBaseExtend.electricityType) }}
				</a-descriptions-item>
				<a-descriptions-item label="燃气">
					{{ findLabel(gasTypeList, detail.houseBaseExtend.gasType) }}
				</a-descriptions-item>
				<a-descriptions-item label="供暖">
					{{ findLabel(heatingTypeList, detail.houseBaseExtend.heatingType) }}
				</a-descriptions-item>
				<a-descriptions-item label="看房时间">
					{{ findLabel(viewTypeList, detail.houseBaseExtend.viewType) }}
				</a-descriptions-item>
			</a-descriptions>
			<a-divider />
		</template>
		<template v-else>
			<a-typography-text strong>
				<blockquote>房间信息</blockquote>
			</a-typography-text>
			<a-descriptions :column="{xxl: 5, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}">
				<template v-if="detail.houseType === 2">
					<a-descriptions-item label="房间名称">{{ detail.roomName }}</a-descriptions-item>
					<a-descriptions-item label="朝向">{{ findLabel(orientationList, detail.orientation) }}</a-descriptions-item>
					<a-descriptions-item label="面积">{{ detail.houseArea }} ㎡</a-descriptions-item>
					<a-descriptions-item label="可住人数">{{ detail.userlimit || '无' }}</a-descriptions-item>
					<a-descriptions-item label="经营模式">{{ findLabel(houseBizModeList, detail?.houseBase?.houseBizMode) }}</a-descriptions-item>
				</template>
				<template v-else>
					<a-descriptions-item label="所属房型">{{ value.roomTypeName }}</a-descriptions-item>
					<a-descriptions-item label="门牌号">{{ detail.roomName }}</a-descriptions-item>
					<a-descriptions-item label="户型">{{ detail.houseBase.room }}室{{ detail.houseBase.livingRoom }}厅</a-descriptions-item>
					<a-descriptions-item label="朝向">{{ findLabel(orientationList, detail.orientation) }}</a-descriptions-item>
					<a-descriptions-item label="面积">{{ detail.houseArea }} ㎡</a-descriptions-item>
					<a-descriptions-item label="装修类型">{{ detail.roomType.decorationTypeName || '无' }}</a-descriptions-item>
				</template>
			</a-descriptions>
			<a-divider />
		</template>
		<a-typography-text strong>
			<blockquote>租金信息</blockquote>
		</a-typography-text>
		<a-descriptions :column="{xxl: 5, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}">
			<a-descriptions-item label="租金价格">{{ detail.actualPrice }}</a-descriptions-item>
			<a-descriptions-item label="租金底价">{{ detail.basePrice }}</a-descriptions-item>
			<a-descriptions-item v-if="detail?.houseBase?.houseBizMode==1" label="收房价">{{ detail?.houseBase?.costPrice|| '-' }}</a-descriptions-item>
			<a-descriptions-item label="可租日期">{{ formatDate(detail.avaliableDate) || '无' }}</a-descriptions-item>
		</a-descriptions>
		<a-divider />
		<!-- 特色 -->
		<a-typography-text strong>
			<blockquote>特色</blockquote>
		</a-typography-text>
		<a-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</a-tag>
		<a-divider />
		<!-- 配置 -->
		<a-typography-text strong>
			<blockquote>配置</blockquote>
		</a-typography-text>
		<a-tag v-for="config in goodsConfig" :key="config.id">{{ config.name }}</a-tag>
		<a-divider />
		<!-- 房源描述 -->
		<a-typography-text strong>
			<blockquote>房源描述</blockquote>
		</a-typography-text>
		<a-typography-paragraph>{{ detail.houseRoomDetail.promotionDesc || '无' }}</a-typography-paragraph>
		<a-divider />
		<!-- VR看房地址 -->
		<a-typography-text strong>
			<blockquote>VR看房地址</blockquote>
		</a-typography-text>
		<a-typography-paragraph>{{ detail.houseRoomDetail.vrUrl || '无' }}</a-typography-paragraph>
		<a-divider />
		<!-- 房源图片 -->
		<a-typography-text strong>
			<blockquote>{{ value.houseType === 3 ? '房型' : '房源' }}图片</blockquote>
		</a-typography-text>
		<file-upload :biz-id="value.roomTypeId || value.id" only-show-preview />
		<a-divider />
		<!--集中式项目信息-->
		<template v-if="value.houseType === 3">
			<a-typography-text strong>
				<blockquote>项目信息</blockquote>
			</a-typography-text>
			<a-descriptions :column="{xxl: 5, xl: 3, lg: 3, md: 3, sm: 2, xs: 1}">
				<a-descriptions-item label="项目编号">{{ detail.community.communityNo }}</a-descriptions-item>
				<a-descriptions-item label="项目名称">{{ detail.community.name }}</a-descriptions-item>
				<a-descriptions-item label="经营模式">{{ findLabel(houseBizModeList, detail?.houseBase?.houseBizMode) }}</a-descriptions-item>
				<a-descriptions-item label="城市">{{ detail.houseBase.cityName }}</a-descriptions-item>
				<a-descriptions-item label="地址">{{ detail.community.address }}</a-descriptions-item>
				<a-descriptions-item label="开业日期">{{ detail.community.openingDate }}</a-descriptions-item>
				<a-descriptions-item label="门店电话">{{ detail.community.contactNumber }}</a-descriptions-item>
				<a-descriptions-item label="楼栋信息">{{ detail.houseBase.houseAlias }}</a-descriptions-item>
			</a-descriptions>
			<a-divider />
			<!-- 项目配套 -->
			<a-typography-text strong>
				<blockquote>项目配套</blockquote>
			</a-typography-text>
			<a-tag v-for="config in infrastructure" :key="config.id">{{ config.name }}</a-tag>
			<a-divider />
			<!-- 项目介绍 -->
			<a-typography-text strong>
				<blockquote>项目介绍</blockquote>
			</a-typography-text>
			<a-typography-paragraph>
				{{ detail.communityDetail.projectIntro }}
			</a-typography-paragraph>
			<a-divider />
			<a-typography-text strong>
				<blockquote>VR看房地址</blockquote>
			</a-typography-text>
			<a-typography-paragraph>
				{{ detail.communityDetail.vrUrl }}
			</a-typography-paragraph>
			<a-divider />
			<!-- 项目图片 -->
			<a-typography-text strong>
				<blockquote>项目图片</blockquote>
			</a-typography-text>
			<file-upload :biz-id="detail.community.id" only-show-preview />
			<a-divider />
		</template>
		<!-- 房源归属 -->
		<a-typography-text strong>
			<blockquote>房源归属</blockquote>
		</a-typography-text>
		<a-descriptions :column="2">
			<a-descriptions-item label="所属部门">{{ detail.deptName }}</a-descriptions-item>
			<a-descriptions-item label="房源维护人">{{ detail.stewardName }}</a-descriptions-item>
		</a-descriptions>
	</a-skeleton>
</template>

<script setup lang="ts">
	import {elecTypeList, gasTypeList, heatingTypeList, HouseBase, houseBizModeList, HouseDetail, orientationList, viewTypeList, waterTypeList} from '@/interface/house'
	import {computed, ref, watchEffect} from 'vue'
	import houseApi from '@/api/house-api'
	import {findLabel} from '@/utils'
	import {formatDate} from 'yuxin-base/src/utils/date'
	import FileUpload from '@/components/common/file-upload.vue'

	const props = defineProps<{
		value: HouseBase
	}>()

	const emit = defineEmits(['getApprovalStatus'])
	const loading = ref<boolean>(true)
	const detail = ref<HouseDetail>({
		community: {},
		communityDetail: {},
		houseBase: {},
		houseBaseExtend: {},
		houseRoomDetail: {}
	})

	// 获取房源信息
	const getHouseInfo = () => {
		loading.value = true
		// 根据ID获取房源信息
		houseApi
			.getHouseRoom(props.value.id as string)
			.then(({data}) => {
				emit('getApprovalStatus', data?.renterContract?.approvalStatus)
				detail.value = data
			})
			.finally(() => (loading.value = false))
	}

	// 特色
	const tags = computed(() => {
		// try {
		return JSON.parse(detail.value.tags || '[]')
		// } catch (e) {}
	})

	// 配置
	const goodsConfig = computed(() => {
		// try {
		return JSON.parse(detail.value.goodsConfig || detail.value.communityDetail?.infrastructure || '[]')
		// } catch (e) {}
	})

	// 项目配套
	const infrastructure = computed(() => {
		// try {
		return JSON.parse(detail.value.communityDetail?.infrastructure || '[]')
		// } catch (e) {}
	})

	watchEffect(() => {
		if (props.value.id) {
			getHouseInfo()
		}
	})
</script>
